<template>
    <div :id="id" style="width:100%;height:300px;"></div>
</template>
<script>
import resize from '@/utils/resize'
export default {
    mixins:[resize],
    data(){
        return {
            chart:null,
            chartOne:null
        }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    props:{
        id:{
            type:String,
            default:''
        },
        classifyData:{
            type: Array,
		    default: () => []
        },
        negativeData:{
            type: Array,
		    default: () => []
        }
    },
    watch:{
        classifyData(val){
            this.renderClassify()
        },
        negativeData(val){
            this.renderNegative()
        }
    },
    mounted(){
    },  
    methods:{
        renderClassify(total) {
            this.chart = this.$echarts.init(document.getElementById(this.id),'macarons')
            let data = []
            let count = 0
            for(let i=0;i<this.classifyData.length;i++){
                count += this.classifyData[i].doc_count
                data.push({
                name: this.classifyData[i].key,
                value: this.classifyData[i].doc_count
                })
            }
            if(count<total){
                data.push({
                name: '其他',
                value: total-count
                })
            }
            if(data.length>0){
                this.isHaveChartNewsTwo = true
            }else{
                this.isHaveChartNewsTwo = false
            }
            this.chart.setOption({
                tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                type: 'scroll',
                orient: 'vertical',
                left: '74%',
                bottom: '20px',
                itemGap: 20,
                // itemWidth: 6,
                // itemHeight: 6,
                data: data,
                formatter: function(name){
                    return (name.length > 20 ? (name.slice(0,8)+"...") : name );
                }
                },
                grid: {
                top: 10
                },
                // color: Ecolors.color,
                series: [
                {
                    type:'pie',
                    name: '分类统计',
                    radius: ['40%', '55%'],
                    center: ['35%', '48%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: true,
                            formatter: '{d}%'
                        },
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    itemStyle:{
                    normal: {
                        borderWidth: 2, 
                        borderColor: '#fff',
                    }
                    },
                    data: data
                }
                ]
            })
        },
        renderNegative(){
            this.chartOne = this.$echarts.init(document.getElementById(this.id),'macarons')
            let data = []
            for(let i=0;i<this.negativeData.length;i++){
                data.push({
                name: this.negativeData[i].key,
                value: this.negativeData[i].doc_count
                })
            }
            /* if(data.length>0){
                this.isHaveChartNewsThree = true
            }else{
                this.isHaveChartNewsThree = false
            } */
            this.chartOne.setOption({
                tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                type: 'scroll',
                orient: 'vertical',
                left: '74%',
                top: '4%',
                itemGap: 24,
                // itemWidth: 6,
                // itemHeight: 6,
                data: data,
                formatter: function(name){
                    return (name.length > 20 ? (name.slice(0,8)+"...") : name );
                }
                },
                grid: {
                top: 10
                },
                series: [
                {
                    type:'pie',
                    name: '负面指数',
                    radius: ['40%', '55%'],
                    center: ['35%', '48%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                        show: true,
                        formatter: '{d}%'
                        },
                    },
                    labelLine: {
                    normal: {
                        show: true
                    }
                    },
                    itemStyle:{
                    normal: {
                        borderWidth: 2, 
                        borderColor: '#fff',
                    }
                    },
                    data: data
                }
                ]
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.title{
    font-weight: bold;
    padding-left: 20px;
    text-align: left;
    font-size: 14px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
}
</style>